import { ReactNode } from 'react';
import { ModelInfo } from '../types';

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  children: ReactNode;
  icon?: ReactNode;
};

export const Button = ({ children, icon, ...props }: ButtonProps) => (
  <button
    {...props}
    className={`px-4 py-2 border border-cyan-400 bg-cyan-900/50 text-cyan-300 rounded-sm flex items-center justify-center gap-2 transition-all duration-300
                hover:bg-cyan-700/70 hover:text-white hover:border-cyan-200 button-glow
                disabled:bg-gray-700/50 disabled:text-gray-500 disabled:border-gray-600 disabled:cursor-not-allowed`}
  >
    {icon}
    {children}
  </button>
);

interface PanelProps {
  title: string;
  children?: ReactNode;
  className?: string;
}

export const Panel = ({ title, children, className }: PanelProps) => (
  <div className={`bg-black/50 border border-green-500/30 p-4 backdrop-blur-sm ${className}`}>
    <h3 className="text-lg font-bold text-green-400 mb-4 glow tracking-widest border-b border-green-800/50 pb-2">{title}</h3>
    {children}
  </div>
);

import React, { useState } from 'react';
import { getModels } from '../services/backendApi';

interface ModelSelectorProps {
  selectedModel: string | null;
  onSelectModel: (modelId: string) => void;
  disabled?: boolean;
}

export const ModelSelector = ({ selectedModel, onSelectModel, disabled }: ModelSelectorProps) => {
    const [models, setModels] = useState<ModelInfo[]>([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    // 初次渲染自动加载
    React.useEffect(() => {
        loadModels();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const loadModels = async () => {
        setLoading(true);
        setError(null);
        try {
            const data = await getModels();
            setModels(data);
        } catch (e) {
            setError('获取模型列表失败');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="flex flex-col gap-2">
            <div className="flex items-center gap-2">
                <label className="text-sm text-green-300">选择模型</label>
                <button type="button" onClick={loadModels} disabled={loading} className="text-xs px-2 py-1 border border-cyan-400 rounded bg-black/40 text-cyan-300 hover:bg-cyan-900/40">{loading ? '刷新中...' : '刷新'}</button>
            </div>
            <select
                value={selectedModel ?? ''}
                onChange={(e) => onSelectModel(e.target.value)}
                disabled={disabled || loading}
                className="bg-gray-900/80 border border-green-500/50 text-green-300 p-2 rounded-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:bg-gray-700/50 disabled:text-gray-500"
            >
                <option value="" disabled>{loading ? '加载中...' : '-- 请选择一个 .pth 模型 --'}</option>
                {error && <option value="" disabled>{error}</option>}
                {models.map((model) => (
                    <option key={model.id} value={model.id}>
                        {model.name}
                    </option>
                ))}
            </select>
        </div>
    );
};

interface FileUploaderProps {
    onFileUpload: (file: File) => void;
    buttonText: string;
    disabled?: boolean;
}

export const FileUploader = ({ onFileUpload, buttonText, disabled }: FileUploaderProps) => {
    const fileInputRef = React.useRef<HTMLInputElement>(null);

    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (file) {
            onFileUpload(file);
        }
    };

    return (
        <>
            <input
                type="file"
                ref={fileInputRef}
                onChange={handleFileChange}
                className="hidden"
                accept=".json,.jpg,.jpeg,.png"
                disabled={disabled}
            />
            <Button onClick={() => fileInputRef.current?.click()} disabled={disabled}>
                {buttonText}
            </Button>
        </>
    );
};